/*
 * @Author: xueyp
 * @Date: 2020-06-10 19:59:09
 * @Last Modified by: xueyp
 * @Last Modified time: 2020-06-10 21:26:37
 */
<template>
  <div class="index" :style='bgStyle'>
    <cloud />
    <bubble :bubbleValue="pageData.face_point" />
    <div class="slide-img-wrapper">
      <div @click="toggle('record')">
        <img src="../../assets/images/records.png">
      </div>
      <div @click="toggle('rule')">
        <img src="../../assets/images/rules.png">
      </div>
    </div>
    <transition>
      <rule v-show="isShowRule" @closeRule="close" :isShowRule="isShowRule" :title="'活动规则'"></rule>
    </transition>
    <transition name="slideBottom">
      <earnings-record v-show="isRecord" @closeRecord="close" :isRecord="isRecord"></earnings-record>
    </transition>
    <vButton :pageData="pageData"/>
    <cat />
    <weather :weatherType="weatherType" />
    <timer :regards="pageData.greeting" />
    <popover :pageData="pageData"/>
  </div>
</template>

<script>
import Cloud from "@/components/cloud/Cloud";
import Bubble from "@/components/bubble/Bubble";
import Rule from "@/components/rule/Rule";
import EarningsRecord from "@/components/earningsRecord/EarningsRecord";
import vButton from "@/components/vButton";
import cat from "@/components/cat";
import weather from "@/components/weather";
import timer from "@/components/timer";
import popover from "@/components/popover";
import { mapState } from "vuex";

import {getSleepDetail} from '@/api/request'
export default {
  data() {
    return {
      reLoad: 0,
      isShowRule: false,
      isRecord: false,
      weatherType: 'sun',
      pageData: {},
      bgStyle: {'backgroundImage': `url(${require('../../assets/images/day.png')})`}
    };
  },
  components: {
    Cloud,
    Bubble,
    Rule,
    EarningsRecord,
    vButton,
    cat,
    weather,
    timer,
    popover
  },
  mounted () {
    this.getSleepDetail()
  },
  methods: {
    toggle(type) {
      this.$store.commit("controlMask", { maskIsShow: true });
      if (type === "record") {
        this.isRecord = true
      } else {
        this.isShowRule = true
      }
    },
    close() {
      this.$store.commit("controlMask", { maskIsShow: false });
      this.isRecord = false;
      this.isShowRule = false
    },
    getSleepDetail () {
      if (this.reLoad >= 2) {
        this.$toastMessage({message: '请重新打开尝试', time: 3000})
        return
      }
      getSleepDetail({
        
      }).then(res => {
        this.pageData = res
        let status = ''
        if (!res.can_start && !res.show_count_down) {
          status = 'sleep'
        } else {
          status = 'awake'
        }
        this.$store.commit('CHANGE_CAT_REST_STATUS', {state: status})
        this.$store.commit('GET_BUBBLE_STATUS', {state: res.show_balloon})
        this.$store.commit('GET_COUNT_DOWN_STATUS', {state: res.show_count_down})
        this.$store.commit('SAVE_DATA', res)
      }).catch(e => {
        if (e == '18009') {
          thid.reLoad += 1
          this.getSleepDetail()
        } else {
          this.$toastMessage({message: e.message, time: 3000})
        }
      })
    },
  },
  watch: {
    '$store.state.allData.greeting' () {
      let style = {}
      switch (this.allData.greeting) {
        case '夜深了，晚安':
          this.weatherType = 'moon'
          style = {backgroundImage: `url(${require('../../assets/images/night.png')})`}
          break
        case 'Hi,上午好':
          this.weatherType = 'sun'
          style = {backgroundImage: `url(${require('../../assets/images/day.png')})`}
          break
        case 'Hi,下午好':
          this.weatherType = 'sun'
          style = {backgroundImage: `url(${require('../../assets/images/day.png')})`}
          break
        case 'Hi,晚上好':
          this.weatherType = 'moon'
          style = {backgroundImage: `url(${require('../../assets/images/night.png')})`}
          break
        default:
          this.weatherType = 'sun'
          style = {backgroundImage: `url(${require('../../assets/images/day.png')})`}
      }
      this.bgStyle = style
    }
  },
  computed: {
    ...mapState({
      timeState: "timeState",
      maskIsShow: "maskIsShow",
      allData: "allData"
    })
  }
};
</script>

<style lang="less" scoped>
.index {
  width: 100vw;
  // height: calc(100vh - constant(safe-area-inset-top));
  // height: calc(100vh - env(safe-area-inset-top));
  height: calc(100vh);
  overflow: hidden;
  // top: constant(safe-area-inset-top); /* 兼容 iOS < 11.2 */
  // top: env(safe-area-inset-top);
  // background-image: url("https://ossko.bojem.com/keditor/20200610/84641791591752074.png");
  background-repeat: no-repeat;
  background-position: bottom center;
  background-attachment: fixed;
  background-size: cover;
  position: relative;
  .slide-img-wrapper {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    right: 0.4rem;
    height: 2.37rem;
    display: flex;
    flex-direction: column;
    justify-content: space-around;
    align-items: center;
    img {
      width: 1rem;
      height: 1rem;
      z-index: 99;
    }
  }
  .slideBottom-enter-active {
    transition: all 0.3s;
  }
  .slideBottom-leave-active {
    transition: all 0.6s;
  }
  .slideBottom-enter,
  .slideBottom-leave-to {
    bottom: -7.1rem;
  }
  .slideBottom-enter-to,
  .slideBottom-leave {
    bottom: 0;
  }
}
// .index{
//   top: constant(safe-area-inset-bottom);
//   top: env(safe-area-inset-bottom);
// }
</style>